<template>
  <div class="online-box">
    <div class="select-box clearfix">
      <el-radio-group
        v-if="showTypeSelect"
        v-model="launchType"
        @change="typeChange"
        size="medium"
      >
        <el-radio-button label="2">教师</el-radio-button>
        <el-radio-button label="1">学生</el-radio-button>
      </el-radio-group>
      <p>选择版本：</p>
      <div class="select-box-left">
        <div class="box-main" style="flex: 2">
          <el-tabs
            v-model="activeName"
            tab-position="left"
            style="height: 300px;"
            @tab-click="handleClick"
          >
            <el-tab-pane
              :name="app.id + ''"
              v-for="app in appList"
              :key="app.id"
              ><span slot="label"
                ><el-checkbox
                  @change="appCheckChang(app)"
                  v-model="app.checked"
                />
                {{ app.name }}</span
              >
              <el-radio-group v-model="app.selectBatchLaunch">
                <el-radio
                  v-for="version in app.versionList"
                  :key="version.appVersionId"
                  :label="version.appVersionId"
                  >{{
                    `${version.version}（${
                      launchType == 1
                        ? `${version.gradeCount}个年级、${version.classesCount}个班级`
                        : `${version.teacherCount}个教师`
                    }）`
                  }}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                    version.remark
                  }}</el-radio
                >
              </el-radio-group>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="box-main main-border">
          <div v-if="launchType == 2">
            <p>选择教师：</p>
            <el-checkbox
              :indeterminate="teacherList.isIndeterminate"
              v-model="teacherList.isCheck"
              @change="checkTeacherTitle(teacherList.isCheck)"
              >全选</el-checkbox
            >
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group
              v-model="teacherList.checkedData"
              @change="checkTeacherItem(teacherList.checkedData)"
            >
              <el-checkbox
                v-for="grade in teacherList.teacherList"
                :label="grade.id"
                :key="grade.id"
                >{{
                  `${grade.realName}(${grade.gradeList.join('、')} ${
                    grade.subject
                  })`
                }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div v-else>
            <p>选择班级：</p>
            <div v-for="(grade, index) in gradeList" :key="grade.gradeId">
              <el-checkbox
                :indeterminate="grade.isIndeterminate"
                v-model="grade.isCheck"
                @change="checkTitle(grade.isCheck, index)"
                >{{ grade.gradeName }}</el-checkbox
              >
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group
                v-model="grade.checkedData"
                @change="checkItem(grade.checkedData, index)"
              >
                <el-checkbox
                  v-for="classes in grade.classesVoList"
                  :label="classes.classesId"
                  :key="classes.classesId"
                  >{{ classes.classesName
                  }}{{ classes.appVersion }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-box">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="submitFn">确 定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { ossUpload, tableUpdate } from '@/api/api.js'
import { addPrincipalInfo } from '@/api/user.js'
import {
  getClassesList,
  getTeacherList,
  getAppList,
  schoolAppList
} from '@/api/launch'
export default {
  props: {
    showTypeSelect: {
      type: Boolean,
      default: false
    },
    launchTypeProp: {
      type: Number,
      default: 2
    },
    selectEnums: {
      type: Object,
      default: function () {
        return {}
      }
    },
    masterId: '',
    schoolId: ''
  },
  watch: {
    schoolId (val, oldval) {
      console.log('val', val)
      this.getGradeList()
      this.getTeacherList()
      this.getAppList()
    },
    launchTypeProp (val) {
      console.log('type', val)
      this.launchType = val
      this.typeChange()
    }
  },
  data () {
    return {
      launchType: this.launchTypeProp,
      activeName: '',
      schoolList: [],
      search: {
        name: ''
      },
      gradeList: [],
      teacherList: [],
      appList: []
    }
  },
  async created () {
    await this.getGradeList()
    await this.getTeacherList()
    await this.getAppList()
  },
  methods: {
    appCheckChang (app) {
      // console.log('app', app)
      if (app.checked) {
        if (app.selectBatchLaunch) {

        } else {
          if (app.versionList.length) { app.selectBatchLaunch = app.versionList[0].appVersionId }
        }
      } else {
        app.selectBatchLaunch = null
      }
    },
    async typeChange () {
      await this.getGradeList()
      await this.getTeacherList()
      await this.getAppList()
    },
    async getAppList () {
      const res = await getAppList({
        type: this.launchType,
        pageSize: 999,
        page: 1
      })
      res[1].data.map((item, index) => {
        item.versionList = []
        if (index === 0) {
          item.checked = true
        } else {
          item.checked = false
        }
        item.selectBatchLaunch = null
      })
      this.appList = res[1].data
      this.activeName = res[1].data[0].id + ''
      this.getAppVersionList(res[1].data[0].id)
    },
    async getAppVersionList (appId) {
      const _index = this.appList.findIndex(item => item.id == appId)
      if (!this.appList[_index].versionList.length) {
        const versionList = await schoolAppList({
          appId,
          schoolIds: this.schoolId
        })
        this.$nextTick(() => {
          this.appList[_index].versionList = versionList[1].data
          if (this.appList[_index].checked) {
            this.appList[_index].selectBatchLaunch =
              versionList[1].data[0].appVersionId
          }
        })
      }
    },
    async getGradeList (appId) {
      if (this.schoolId) {
        const gradeList = await getClassesList({ schoolId: this.schoolId })
        for (let index = 0; index < gradeList[1].data.length; index++) {
          const element = gradeList[1].data[index]
          element.isIndeterminate = true
          element.isCheck = false
          element.checkedData = []
        }
        this.$nextTick(() => {
          this.gradeList = gradeList[1].data
        })
      }
    },
    async getTeacherList (schoolId) {
      if (this.schoolId) {
        const teacherList = await getTeacherList({ schoolId: this.schoolId })
        this.$nextTick(() => {
          this.teacherList = {
            teacherList: teacherList[1].data,
            isIndeterminate: true,
            isCheck: false,
            checkedData: []
          }
        })
      }
    },
    async handleClick (tab, event) {
      // console.log(tab, event, this.activeName);
      this.getGradeList(this.activeName)
      this.getAppVersionList(this.activeName)
    },
    checkItem (val, index, sIndex) {
      // console.log('item =>>', val, index)
      let checkedCount = val.length
      this.gradeList[index].isCheck =
        checkedCount === this.gradeList[index].classesVoList.length
      this.gradeList[index].isIndeterminate =
        checkedCount > 0 &&
        checkedCount < this.gradeList[index].classesVoList.length
    },
    checkTitle (val, index, sIndex) {
      // console.log('title =>>', val, index)
      let arr = []
      const re = this.gradeList[index].classesVoList
      // 全选
      if (val) {
        for (let i = 0; i < re.length; i++) {
          arr[i] = re[i]['classesId']
        }
      }
      this.gradeList[index].checkedData = arr
      this.gradeList[index].isIndeterminate = false
    },
    checkTeacherItem (val, index, sIndex) {
      let checkedCount = val.length
      this.teacherList.isCheck =
        checkedCount === this.teacherList.teacherList.length
      this.teacherList.isIndeterminate =
        checkedCount > 0 && checkedCount < this.teacherList.teacherList.length
    },
    checkTeacherTitle (val, index, sIndex) {
      let arr = []
      const re = this.teacherList.teacherList
      // 全选
      if (val) {
        for (let i = 0; i < re.length; i++) {
          arr[i] = re[i]['id']
        }
      }
      this.teacherList.checkedData = arr
      this.teacherList.isIndeterminate = false
    },
    submitFn () {
      this.$emit('change', {
        launchType: this.launchType,
        appList: this.appList,
        gradeList: this.gradeList,
        teacherList: this.teacherList,
        schoolId: this.schoolId
      })
    },
    cancelFn () {
      this.$emit('cancel')
    }
  }
}
</script>
<style scoped>
.el-checkbox {
  min-width: 90px;
  width: 160px;
  margin: 0;
}
.main-border {
  border-left: 2px solid #e4e7ed;
  padding-left: 10px;
  margin-left: 10px;
}
.el-radio {
  display: block;
  margin-bottom: 15px;
}
.el-radio + .el-radio {
  margin-left: 0;
}
.select-box-left {
  display: flex;
}
.box-main {
  flex: 1;
  height: 300px;
  overflow-y: auto;
}
.el-checkbox {
  /* margin-left: 30px; */
}
.el-tab-pane {
  overflow-y: auto;
  height: 300px;
  padding-top: 30px;
  box-sizing: border-box;
}
.el-tabs__header {
  flex: 1 !important;
}
.el-tabs__content {
  flex: 1 !important;
}
.footer-box {
  margin-top: 20px;
  text-align: right;
}
</style>
